<template>
	<z-nav-bar title="我的教练"></z-nav-bar>
	<view v-if="dataset && dataset.length" class="training-content">
		
		<navigator v-for="(item, index) in dataset" :key="index" class="item" :url="`/pages/student/training/coach-detail?id=${item.instructorId}`">
			<image :src="setting.oss_pub_domain + item.instructorAvatar" class="avatar" />
			<view>
				<view>
					<text class="uni-primary-disable">教练</text>
					<text class="name uni-ml-2">{{ item.instructorName }}</text>
				</view>
				<view class="content">
					<text class="uni-mr-2">训练课程</text>
					<text class="uni-warning">{{ item.courseNum }}</text>
					<view class="line"></view>
					<text class="uni-mr-2">已学课程</text>
					<text class="uni-success">{{ item.coursesLearnedNum }}</text>
				</view>
			</view>
		</navigator>
	</view>
	<z-no-data v-else width="320"></z-no-data>
</template>

<script>
import { getCoach } from '@/api/student';
export default {
	data() {
		return {
			loading: false,
			param: { pageSize: 10, pageNum: 0 },
			pager: {},
			dataset: []
		};
	},
	mounted() {
		this.fetchData();
	},
	methods: {
		async fetchData() {
			this.loading = true;
			const { rows, total } = await getCoach(this.param);
			if (this.param.pageNum == 1) this.dataset = rows;
			else this.dataset.push(...rows);
			this.pager.total = total;
			this.loading = false;
		}
	},
	onReachBottom() {
		if (this.dataset.length >= this.pager.total) return;
		this.param.pageNum += 1;
		this.fetchData();
	}
};
</script>
<style lang="scss" scoped>
.training-content {
	width: 100vw;
	box-sizing: border-box;
	padding: 0 32rpx;
}
.title {
	font-size: 36rpx;
	font-weight: 600;
	color: #1a2233;
	padding: calc(var(--status-bar-height) + 14rpx) 0 0 32rpx;
}
.item {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	padding: 24rpx 0;
	border-bottom: 2rpx solid #ebeded;
	.name {
		font-weight: bold;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		margin-right: 32rpx;
	}
	.content {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-top: 8rpx;
		.line {
			width: 2rpx;
			height: 20rpx;
			background: #d8d8d8;
			margin: 0 18rpx;
		}
	}
}
</style>
